<template>
    <div class="search-box">
        <input type="text" class="box" :placeholder="placeholder" v-model="query" ref="input">
        <i class="icon-dismiss" v-show="query" @click="handleClickClear">+</i>
        <div class="search-btn" @click="toSearch">搜索</div>
    </div>
</template>

<script type="text/ecmascript-6">
    // import {debounce} from 'common/utils/index'

    export default {
        data () {
            return {
                query: ''
            }
        },
        props: {
            placeholder: {
                type: String,
                default: '请输入姓名或者身份证号'
            }
        },
        // created () {
        //     this.$watch('query', debounce((newVal) => {
        //         this.$emit('queryChange', newVal)
        //     }, 200))
        // },
        methods: {
            handleClickClear () {
                this.query = ''
                this.$emit('clearQuery')
            },
            setQuery (key) {
                this.query = key
            },
            blurInput () {
                this.$refs.input.blur()
            },
            toSearch () {
                this.$emit('toQuery', this.query)
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "~common/stylus/variable"
    .search-box
        display: flex
        align-items: center
        box-sizing: border-box
        width: 100%
        padding: 0 30rpx
        height: 90rpx
        background: #fff
        position relative
        .box
            flex: 1
            margin: 0 24rpx 0 3rpx
            height 56rpx
            line-height: 56rpx
            padding-left 33rpx
            background: $color-highlight-background
            color: $color-text
            font-size: $font-size-medium
            border-radius: 28rpx
            &::placeholder
                color: $color-text-d
                background #f2f2f2
        .icon-dismiss
            width 36rpx
            height 36rpx
            border-radius 50%
            text-align center
            background #fff
            font-size: 70rpx
            transform rotate(45deg)
            color: #111
            position absolute
            right 132rpx
            top 2rpx
            z-index 5
        .search-btn
            color: #747474
            font-size 34rpx
            width 74rpx
</style>
